@charset "utf-8";


/* End Material Icons--------------------------------------------------------------------------------------------------*/

/* remember to define focus styles! */
:focus,.btn:focus ,a:focus{ outline: 0; box-shadow:none; }
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus,button:focus{ outline: 0;}
/* =Typography--------------------------------------------------------------------------------------------------*/
/* Setting up the fonts */
html {
  scroll-behavior: smooth;
}
body,html{height:100%;font-size: 10px;}
body { font-family: 'Inter', sans-serif; font-size:1.6rem; line-height:1.25; color: #010E0E; -webkit-font-smoothing: antialiased; font-weight: normal; background-image: url(../images/banner-bg.jpg);background-size: cover;}
/* Typography--------------------------------------------------------------------------------------------------*/
/* =Headings--------------------------------------------------------------------------------------------------*/
h1 { margin: 0; font-size: 77px; line-height: normal;}
h2 { font-size:60px; line-height:70px; margin-top: 0; font-weight: 600; margin-bottom:25px;}
h3 { font-size:16px; line-height:18px;margin-top: 0; font-weight: 700; margin-bottom: 10px;}
h4 {font-size:15px; line-height:18px;margin-top: 0;}
h5 {font-size:14px; line-height:14px;margin-top: 0; font-weight: 700;}
h6 {}
/* End Headings--------------------------------------------------------------------------------------------------*/
/* =Links--------------------------------------------------------------------------------------------------*/
button{cursor: pointer;}
a { text-decoration:none; color:rgba(30, 28, 36, 55%); cursor:pointer; outline: 0; transition: all 0.2s ease-in-out;}
a:hover{ text-decoration:none; outline:0; color:#007AEB; transition: all 0.2s ease-in-out;}
/* End Links
--------------------------------------------------------------------------------------------------*/
/* =helper Classes--------------------------------------------------------------------------------------------------------*/
p { padding:0 0 10px 0; margin:0; }
img{max-width: 100%;}
hr{border-top: 1px solid #D2DDEC;}
/* End Branding
--------------------------------------------------------------------------------------------------------*/

/* =Toolkit--------------------------------------------------------------------------------------------------*/
/* general purpose classes */
ul,li, ol { margin: 0; padding: 0; list-style-type: none }
.btn{ padding:15px 24px; line-height:24px; font-size: 16px; box-shadow: none;font-weight:500; border-radius:30px;letter-spacing: 0.3px;min-width: 169px;}
.btn-sm{padding:8px 15px;line-height:20px; font-size: 12px;}
.border-none{border-radius: 0;}
.btn-primary{ background:#3E9C35;position: relative;border: 1px solid #3E9C35;}

.btn-primary:hover,.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle,.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus{color:#3E9C35;box-shadow: none;background:transparent;border: 1px solid #3E9C35;}
.btn-primary.focus, .btn-primary:focus{color:#ffff;box-shadow: none;background: #3E9C35;border: 1px solid #3E9C35;}

.btn-secondary{ background:transparent; color: #424242;border:none}
.btn-secondary:hover,.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle,.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show>.btn-secondary.dropdown-toggle:focus{box-shadow: none;color:#3E9C35;background-color: transparent;border:none}
.btn-outline-secondary{ background:transparent; color: #fff;border-color: #fff;}
.btn-outline-secondary:hover,.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, .show>.btn-outline-secondary.dropdown-toggle,.btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .show>.btn-outline-secondary.dropdown-toggle:focus{background: #fff;box-shadow: none;color:#007bff;border: 1px solid transparent;}

.btn-groups{margin: -8px;}
.btn-groups .btn{margin: 8px;}

.btn:empty{display: none;}
/* Button Animation */
.btn{position: relative;overflow: hidden;}
.btn:after {content: '';position: absolute;top: 50%;left: 50%;width: 5px;height: 5px;background: rgba(255, 255, 255, .5);opacity: 0;border-radius: 100%;transform: scale(1, 1) translate(-50%);transform-origin: 50% 50%;}
.btn:focus:not(:active)::after,.btn:hover:not(:active)::after{animation: ripple 1s ease-out;}
@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 1;
  }
  20% {
    transform: scale(25, 25);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(40, 40);
  }
}
/* =End Toolkit--------------------------------------------------------------------------------------------------*/
/* general purpose classes */

/* Common Style */
main{display: flex;flex-direction: column;min-height: 100%;}

/* form-control */
.form-md { 
    width: 100%; 
    text-align: center; 
    margin: 0 0 24px;
  }
  .form-md .form-group {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }
  .form-group {
    margin-bottom: 16px;
    position: relative;
  }
  input {
    position: relative;
    display: block;
    width: 100%;
    border: 1px solid #B3B3B3;
    border-radius: 4px;
    background-color: transparent;
    margin: 0px auto;
    padding: 6px 4px 4px 14px;
    height: 40px;
    outline: none !important;
    font-size: 16px;
    color: rgba(0,0,0,0.85);
    transition: all .2s ease-in-out;
  }
  
  label {
    position: absolute;
    top: 26px; 
    left: 18px;
    text-align: left;
    display: inline-block;
    padding: 0 4px;
    height: 14px;
    line-height: 14px;
    font-size: 14px;
    font-weight: 400;
    background: #fff;
    color: #B3B3B3;
    margin: 0px auto;
    cursor: text;
    transition: all .15s ease-in-out;
  }
  input:hover, input:focus { border: 1px solid #000; }
  .form-control:focus {
    color: #B3B3B3;
    border-color: #000;
    outline: 0;
    box-shadow: none;
}
  input:valid + label, input:focus + label { 
    top: -6px;
    color: #B3B3B3;
    font-weight: 400;left:14px;
  }
  
/* Header */
header{padding:24px 50px}
.navbar{padding: 0;}
.main-menu{display: flex;justify-content: space-between;width:100%;align-items: center;}
.nav-menu{display: flex;}
.navbar-toggler{padding: 0;border: none;}
.navbar-toggler:focus{outline: none;box-shadow: none;}
.mobile-menu{display: none;}

/* banner */
.banner{padding:20px 70px;}
.banner-wraper{display: flex;align-items: center;justify-content: space-between;}
.banner-btn{display: flex;}
.banner-details{max-width:810px;}
.banner-heading {margin-bottom: 32px;margin-top: 16px;}
.banner-heading h1 {font-weight: 700;font-size: 77px;color: #010E0E;line-height: 92px;}
.banner-heading span {display: block;color: #3E9C35;}
.banner-heading p{margin-bottom: 24px;font-size: 18px;padding: 0;line-height: 26px;}
.bg-success{background-color: #ECF5EC !important;color: #3E9C35;border-radius: 30px;padding: 8px 20px;font-size: 14px;font-weight: normal;line-height: 20px;}
.banner-images{position: relative;margin-left: auto;max-width:100%;}
.mobile-img{position: relative;width: 55%;margin-top: -65%;margin-left: 20%;}
.logo-img {
  /* animation-duration: 30s;
   animation-iteration-count: infinite;
   animation-name: rightToLeftRotating;
   animation-timing-function: linear; */
   padding: 40px;
}
.banner-slider-wrapper{width: 37.5%;}
.slick-initialized .slick-slide{display: flex;align-items: center;justify-content: center;}
.logo-img img{display: flex;align-items: center;justify-content: center;}
.slick-dots {position: fixed;top: 50%;right: 25px;width: auto;display: flex;flex-direction: column;}
.slick-dots li{width: 24px;height: 24px;margin: 2px;}
.slick-dots li button{width: 24px;height: 24px;position: relative;border-radius: 50%;}
.slick-dots li button:before{width: 8px;height: 8px;background: #3E9C35;content: '';border-radius: 50%;opacity: 1;top: 50%;left: 50%;transform: translate(-50% , -50%);}
.slick-dots li.slick-active button{background: #3E9C35;}
.slick-dots li.slick-active button:before{background: #fff;opacity: 1;}

/**
 *  Progress Bar
 */
 .progress {
  display: block;
  width: 100%;
  height: 5px;
  overflow: hidden;
  background-color: #061005;
  background-image: linear-gradient(to right, #3E9C35, #3E9C35);
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: background-size .4s ease-in-out;
  position: fixed;
  left: 0;
  bottom: 0;
  border-radius: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Footer */
footer{padding: 0 70px 70px;margin-top: auto;}
.social-media{display: flex;margin-bottom: 24px;}
.social-media li a{width: 65px;height: 65px;padding: 15px;border: 1px solid #E4E4E4;border-radius: 50%;margin-right: 15px;display: flex;align-items: center;justify-content: center;transition: 0.3s ease-in all;}
.social-media li a:hover{margin-top: -5px;}
.copyright-section p{padding: 0;}

/* Modal */
.modal-backdrop.show{opacity: 0.2;}
.modal-content{border-radius: 32px;border: none;max-width: 836px;padding:54px 0 74px;}
.modal.show .modal-dialog {transform: none;max-width: 836px;}
.benji-modal .btn-close {width: 51px;height: 51px;background-color: #ECF5EC;border-radius: 50%;position: absolute;top: 28px;right: 28px;color: #010E0E;font-size: 10px;}
.form-logo {margin-bottom: 35px;}
.form-heading{margin-bottom: 50px;}
.form-heading h2 {font-size: 40px;line-height: 48px;font-weight: 500;margin-bottom: 16px;}
.form-heading p {color: #757575;font-size: 16px;font-weight: 400;line-height: 24px;padding: 0;}
.modal-width{width:494px;margin:0 auto}
.button-modal{width: 494px; margin:0 auto}
.form-control{height: 65px; padding:22px;font-size: 14px;border-radius: 10px;}
.button-modal .btn{width: 100%;}
.form-heading h3{font-size: 32px;color: #010E0E;font-weight: 500;margin-bottom:16px;line-height: 41px;}
img.gif-img {display: block;margin: auto;max-width: 33%;}


@keyframes rightToLeftRotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes leftToRightRotating {
  from {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  to {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}